<!DOCTYPE html>
<html>
    <head>
        <title>3种常用网站图片轮播切换代码 - 站长素材</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/style.css" />

        <!--Luara样式文件-->
        <!--渐隐样式-->
        <link rel="stylesheet" href="css/luara.css" />
        <!--左滑样式-->
        <link rel="stylesheet" href="css/luara.left.css" />
        <!--上滑样式-->
        <link rel="stylesheet" href="css/luara.top.css" />

    </head>
    <body>
        <script src="js/jquery-1.8.3.min.js"></script>
        <!--Luara js文件-->
        <script src="js/jquery.luara.0.0.1.min.js"></script>

        <h5>渐隐</h5>
        <hr/>
        <!--Luara图片切换骨架begin-->
        <div class="example">
            <ul>
                <li><img src="images/1.jpg" alt="1"/></li>
                <li><img src="images/2.jpg" alt="2"/></li>
                <li><img src="images/3.jpg" alt="3"/></li>
                <li><img src="images/4.jpg" alt="4"/></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!--Luara图片切换骨架end-->
        <script type="text/javascript">
            $(function () {
        // 调用Luara示例
                $(".example").luara({width: "500", height: "334", interval: 4000, selected: "seleted"});
            });
        </script>

        <h5>上滑 </h5>
        <hr/>
        <!--Luara图片切换骨架begin-->
        <div class="example1">
            <ul>
                <li><img src="images/1.jpg" alt="1"/></li>
                <li><img src="images/2.jpg" alt="2"/></li>
                <li><img src="images/3.jpg" alt="3"/></li>
                <li><img src="images/4.jpg" alt="4"/></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!--Luara图片切换骨架end-->
        <script type="text/javascript">
            $(function () {
        // 调用Luara示例
                $(".example1").luara({width: "500", height: "334", interval: 5000, selected: "seleted", deriction: "top"});
            });
        </script>


        <h5>左滑</h5>
        <hr/>
        <!--Luara图片切换骨架begin-->
        <div class="example2">
            <ul>
                <li><img src="images/1.jpg" alt="1"/></li>
                <li><img src="images/2.jpg" alt="2" /></li>
                <li><img src="images/3.jpg" alt="3"/></li>
                <li><img src="images/4.jpg" alt="4" /></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!--Luara图片切换骨架end-->
        <script type="text/javascript">
            $(function () {
        // 调用Luara示例
                $(".example2").luara({width: "500", height: "334", interval: 4500, selected: "seleted", deriction: "left"});

            });
        </script>
        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
            <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
            <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
        </div>
    </body>
</html>